<template>
    <div class="nav-train">
        <ul>
           <li  v-for="item in list" :key="item.id" :class="{'active':activeName==item.name }" @click="go(item.name)">{{item.navs}}
               <span></span>
           </li>
        </ul>
        <router-view></router-view>
    </div>
</template>
<script>
import {getList} from "../../http/api"
export default {
    data(){
        return{
            list:[],
            activeName:"H5"
        }
    },
    methods:{
        go(val){
            this.$router.push({
                name:val
            })
             this.activeName=val
        }
    },
   async created(){
       const res= await getList("curricala")
       this.list=res
        console.log("111",res)
         
    },
     mounted(){
        console.log(this.$route.name)
       this.activeName= this.$route.name

    }
}
</script>
<style scoped lang="scss">
ul,li{
    list-style: none;
}
.nav-train{
    width: 100%;
    height: 43px;
    background-color: #06c;
    min-width: 1200px;
    ul{
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        padding-left: 165px;
        display: flex;
        box-sizing: border-box;
     
        li{
                color: #fff;
                padding: 0 30px;
                line-height: 43px;
                position: relative;
                cursor: pointer;
                span{
                        width: 2px;
                height: 16px;
                position: absolute;
                top: 0;
                right: 0;
                background-color: #9ff;
                transform: translateY(14px);
                }
        }   
        .active{
    color: #9ff ;
        }   
    }
}
 

</style>